<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('部门列表')" />
    <style>
        body{
            font-size: 20px!important;
        }
        .select-list li p{
            width: 100px;
        }
        div[id^=row_id_]:after {
            content: '';
            height: 0;
            line-height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }

        .btn-group-sm>.btn, .btn-sm,.table-striped .table>thead:first-child>tr:first-child>th{
            font-size: 20px!important;
        }
        tr[pid= row_root]{
            background-color: #cfe8fc;
        }
        tr[pid^=row_id_]{
            width: calc((100% / 7) - -27px) !important;
            /*background-color: #E1DEDE;*/
            float: left;
            font-size: 16px;
            height: 73px;
            position: relative;
            margin: 0 12px 10px 0;
        }

        div[id^=row_id_]{
            margin: 10px auto 0;
            width: 95%;
            border: 2px solid #c4c7ce;
            height: auto;
            display: none;

        }
        div[id^=row_id_] tr[pid^=row_id_]:nth-child(6n) {
            margin-right: 0;
        }
        tr[pid^=row_id_] td {
            text-overflow: clip !important;
            overflow: visible !important;
            padding: 0px !important;
            white-space: pre-wrap;
        }
        tr[pid^=row_id_] td:nth-child(1) {
            display: none;
        }
        tr[pid^=row_id_] td:nth-child(2) {
            position: absolute;
            top: 5px;
            left: 20px;
            width: 180px;
            white-space: pre-wrap;
        }
        tr[pid^=row_id_] td:nth-child(3) {
            position: absolute;
            bottom: 5px;
            left: 5px;
        }
        tr[pid^=row_id_] td:nth-child(4) {
            position: absolute;
            bottom: 5px;
            right: 5px;
        }
        tr[pid^=row_id_] td:nth-child(5) {
            position: absolute;
            top: 5px;
            right: 5px;
        }
        tr[pid^=row_id_] td:nth-child(6) {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 12px;
        }
        /*.my-head .proName_cls {*/
            /*text-align: center !important;*/
            /*padding: 8px;*/
        /*}*/
        tr[pid^=row_id_] td span {
            display: none !important;
        }
        /*.my-head{*/
            /*width: 90%!important;*/
            /*margin: 0 auto;*/
            /*border: 1px solid #e7eaec;*/
            /*border-bottom: 0;*/
        /*}*/
        /*.my-head>tr th:nth-of-type(1){*/
            /*background-color: #fff;*/
            /*border-bottom: 0px solid #e7eaec!important;*/
            /*display: none;*/
        /*}*/

        tr.red-bg{
            background: #f7d2cd;
            color: #ed1c24;
        }
        tr.yellow-bg{
            background: #fff4d3;
            color: #ffc822;
        }
        .bootstrap-tree-table .treetable-tbody td{
            border-bottom: 0px solid #e7eaec!important;

        }

        td.over{
            color: red;
        }

        td.no-over{
            color: rgb(64, 158, 255);
        }

        .bootstrap-tree-table .treetable-tbody td.light_cls{
            text-align: center!important;
        }
        .bootstrap-tree-table .treetable-tbody .my-head th.transitionTime_cls,.bootstrap-tree-table .treetable-tbody .my-head th.expectedDate_cls,
        .bootstrap-tree-table .treetable-tbody .my-head th.leader_cls,.bootstrap-tree-table .treetable-tbody .my-head th.lightStatus_cls{
            text-align: center!important;
        }
        .bootstrap-tree-table .treetable-tbody td.mainOrgname_cls,.bootstrap-tree-table .treetable-tbody td.expectedDate_cls{
            text-align: center!important;
        }
        /*.my-head>tr th:nth-of-type(1) {*/
            /*background-color: transparent;*/
        /*}*/
    </style>

</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="dept-form">
                <div class="select-list">
                    <ul>

                        <li>
                            <p>项目名称：</p>
                            <input type="text" name="proName"/>
                        </li>
                        <li>
                            <p>企业名称：</p>
                            <input type="text" name="companyName"/>
                        </li>
                        <li>
                            <p>警报类型：</p>
                            <select name="light"  id="lightType">
                                <option value="">所有</option>
                                <option value="1">红色警告</option>
                                <option value="2">黄色警告</option>
                            </select>
                        </li>
                        <!--<li class="select-time">-->
                            <!--<label>时间节点： </label>-->
                            <!--<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>-->
                            <!--<span>-</span>-->
                            <!--<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>-->
                        <!--</li>-->
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.treeTable.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">

            <a class="btn btn-info" id="expandAllBtn">
                <i class="fa fa-exchange"></i> 展开/折叠
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-tree-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">

    var prefix = ctx + "linkong/matterProject"

    $(function() {
        var options = {
            code: "myId",
            parentCode: "proId",
            uniqueId: "myId",
            url: prefix + "/getMoreList",
            expandAll: false,
            expandFirst:false,
            hover:false,
            bordered:false,
            modalName: "项目",
            columns: [{
                field: 'selectItem',
                radio: false
            },
                {
                    field: 'proName',
                    field2:"name",
                    field3:"projectId",
                    title: '项目名称',
                    title2: '事项名称',
                    align: "left",
                    formatter: function(value, row, index) {
                        return value.length > 20 ?value.substr(0,20) + '...': value;
                    }
                },

                {
                    field: 'companyName',
                    field2:"mainOrgname",
                    title: '企业名称',
                    title2: '企业名称',
                    align: "left"
                },

                {
                    field: 'transitionTime',
                    field2: 'expectedDate',
                    title: '移交日期',
                    title2: '预计完成时间',
                    align: "left",
                    formatter: function(value, row, index) {
                        return value == null?'':value.substr(0,10);
                    }
                },
                {
                    field: 'leader',
                    field2: 'status',
                    title: '企业负责人',
                    title2: '责任部门',
                    align: "left",
                    css:function(value,row, index){
                        return value == '1'?"over":"no_over";
                    },
                    formatter2: function(value,row, index) {
                        return value == '1'?"已完成":"进行中";
                    }

                },

                {
                    field: 'remark',
                    field2: 'light',
                    title: '亮灯统计',
                    title2: '亮灯状态',
                    align: "left",

                    formatter:function (value) {
                        if(value == '1'){
                            return'<img  class="imgtag" src="../../img/light_02.png" alt="">'
                        }else if(value == '2'){
                            return'<img  class="imgtag" src="../../img/light_03.png" alt="">'
                        }
                    },
                    formatter2:function(value){
                        return value;
                    }
                },
              ]
        };
        $.treeTable.init(options);

    });

    $(document).on('click','.to_detail',function(){
        var data_id = $(this).attr("data-id");
        var options = {
            url: '/linkong/project/edit/'+ data_id + '?flag=see',
            title:  "项目详情",
            width:1000,
            height:600,
            btn :[ '<i class="fa fa-close"></i> 关闭'],
            callBack:closeTab
        }
        $.modal.openOptions(options);
    })


    function closeTab(index){
        layer.close(index);
    }

</script>
</body>
</html>